<template>
    <div class="card-bag">
        <!--S选择卡券类型-->
        <select-type
                :index="types.index"
                @loaded="selectTypeLoaded"
                @change="selectTypeChange"
            >
        </select-type>
        <!--E选择卡券类型-->

        <!--S列表-->
        <div id="list">
            <cube-slide
                    ref="listSlide"
                    :data="types.values"
                    :autoPlay="false"
                    :showDots="false"
                    :initialIndex="types.index"
                    @scroll-end="selectTypeScrollEnd"
            >
                <cube-slide-item
                        class="list"
                        v-for="(item, index) in types.values"
                        :key="index"
                >

                    <cube-scroll
                            ref="listScroll"
                            class="list-scroll"
                            v-show="list[index].data.length > 0"
                            :options="list[index].scroll_option"
                            @pulling-up="upLoad"
                    >
                        <single-coupon
                                class="list-coupon"
                                v-for="(list_item,list_index) in list[index].data"
                                :key="list_item.type + list_item.id"
                                :data="list_item.coupon"
                                @click.native="clickCoupon(index,list_index)"
                        >
                            <template v-slot:status v-if="list_item.status === '2'">
                                <i class="iconfont icon-yihexiao"></i>
                            </template>
                            <template v-slot:status v-else-if="list_item.coupon.past">
                                <i class="iconfont icon-yiguoqi"></i>
                            </template>
                        </single-coupon>
                    </cube-scroll>
                    <empty v-show="list[index].data.length <= 0">暂无卡券</empty>

                </cube-slide-item>

            </cube-slide>
        </div>
        <!--E列表-->

    </div>
</template>

<script>
// 用户卡券包
import SelectType from "./components/select-type/SelectType"
import SingleCoupon from "@c/coupon"
import Empty from "@c/empty"
export default {
    name: "card-bag",
    data() {
        return {
            // 卡券类型
            types: {
                values: [],
                index: 0
            },
            // 列表
            list: [],
            // 点击操作卡券,下标，0卡券类型下标，1卡券列表下标
            handle_index: [0,0]
        }
    },
    components: {
        SelectType,
        SingleCoupon,
        Empty
    },
    watch: {
        "types.values"(value) {
            for(let i=0;i<value.length;i++) {
                this.list.push({
                    // 列表是否正在加载中
                    loading: false,
                    // 第一次是否已经加载
                    first: false,
                    limit: [0, 10],
                    data: [],
                    // 滚动条配置
                    scroll_option: {
                        scrollbar:true,
                        pullUpLoad:{
                            txt:{
                                more:"上拉加载",
                                noMore:"----我也是有底线的----"
                            }
                        },
                        click: false
                    }
                })
            }
            this.list[0].first = true
            this.getList()
        }
    },
    mounted() {

    },
    methods: {
        /**
         * 初始化卡券类型value值
         */
        selectTypeLoaded(res) {
            this.types.values = res
        },
        /**
         * 选择卡券类型左右滚动结束
         * @param index
         */
        selectTypeScrollEnd(index) {
            this.types.index = index
            if(!this.list[index].first) {
                this.list[index].first = true
                this.getList()
            }
        },
        /**
         * 选取卡券类型
         */
        selectTypeChange(value) {
            this.types.index = value
        },
        /**
         * 获取列表
         */
        getList(){
            let _index = this.types.index
            if(this.list[_index].loading) return true
            this.list[_index].loading = true
            this.$get("memberCoupon/getUserList",{
                limit: this.list[_index].limit,
                type: this.types.values[_index]
            })
                .then((res) => {
                    this.list[_index].loading = false
                    let {code, data} = res.data
                    if(code === 0) {
                        this.list[_index].data.push(...data)
                        this.list[_index].limit[0] += this.list[_index].limit[1]
                        if(this.list[_index].data.length < this.list[_index].limit[1]){
                            this.list[_index].scroll_option.pullUpLoad = false
                            this.$refs.listScroll[_index].refresh()
                        } else {
                            this.$refs.listScroll[_index].forceUpdate(true,false)
                        }
                    } else {
                        if(this.list[_index].data.length > this.list[_index].limit[1]){
                            this.$refs.listScroll[_index].forceUpdate(true,true)
                        } else {
                            this.list[_index].scroll_option.pullUpLoad = false
                            this.$refs.listScroll[_index].refresh()
                        }
                    }
                })
        },
        /**
         * 列表上拉加载
         */
        upLoad() {
            this.getList()
        },
        /**
         * 点击卡券
         * @param types_index
         * @param index
         */
        clickCoupon(types_index,index) {
            this.handle_index = [types_index,index]
            let list_data = this.list[types_index].data[index]
            let sheet_data = [
                {
                    content: (list_data.status === '2' || list_data.coupon.past) ? '查看' : '使用卡券',
                    value: 'detail'
                },
                {
                    content: '删除',
                    value: 'delete'
                }
            ]
            this.$createActionSheet({
                title: '操作',
                data: sheet_data,
                zIndex: 1300,
                onSelect:(res)=>{
                    switch (res.value) {
                        case 'detail':
                            this.detail(list_data.id)
                            break;
                        case 'delete':
                            this.$createDialog({
                                type: 'confirm',
                                title: '删除',
                                content: '删除后不可恢复，确定要删除此卡券吗？',
                                onConfirm: () => {
                                    this.delete(list_data.id)
                                }
                            }).show()
                            break;
                    }
                }
            }).show()
        },
        /**
         * 删除卡券
         */
        delete(member_coupon_id) {
            console.log(this.list[this.handle_index[0]].data[this.handle_index[1]])
            this.$post('memberCoupon/del',{
                member_coupon_id
            })
                .then((res) => {
                    if(res.data.code === 0) {
                        this.list[this.handle_index[0]].data.splice(this.handle_index[1],1)
                    } else {
                        this.$createToast({
                            time: 1000,
                            txt: '操作失败',
                            type: 'error',
                            mask: true
                        }).show()
                    }
                })
        },
        /**
         * 显示状态
         */
        detail(member_coupon_id) {
            let coupon_detail = this.$createCouponDetail({
                is_show: true,
                member_coupon_id,
                onClose: () => {
                    coupon_detail.remove()
                }
            })
        }
    }
}
</script>

<style scoped lang="less" src="./card-bag.less"></style>
